<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>后台管理系统</title>
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.6/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.6/themes/icon.css">
	<script type="text/javascript" src="jquery-easyui-1.6.6/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
</head>
<body>

	<div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:50px">

                <div class="easyui-panel" style="padding:10px 20px; border:0;">
                        <a href="javascript:;" class="easyui-linkbutton" data-options="plain:true">Home</a>
                        <a href="javascript:;" class="easyui-menubutton" data-options="menu:'#mm1',iconCls:'icon-edit'">Edit</a>
                        <a href="javascript:;" class="easyui-menubutton" data-options="menu:'#mm2',iconCls:'icon-help'">Help</a>
                        <a href="javascript:;" class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
                    </div>
                    <div id="mm1" style="width:150px;">
                        <div data-options="iconCls:'icon-undo'">Undo</div>
                        <div data-options="iconCls:'icon-redo'">Redo</div>
                        <div class="menu-sep"></div>
                        <div>Cut</div>
                        <div>Copy</div>
                        <div>Paste</div>
                        <div class="menu-sep"></div>
                        <div>
                            <span>Toolbar</span>
                            <div>
                                <div>Address</div>
                                <div>Link</div>
                                <div>Navigation Toolbar</div>
                                <div>Bookmark Toolbar</div>
                                <div class="menu-sep"></div>
                                <div>New Toolbar...</div>
                            </div>
                        </div>
                        <div data-options="iconCls:'icon-remove'">Delete</div>
                        <div>Select All</div>
                    </div>
                    <div id="mm2" style="width:100px;">
                        <div>Help</div>
                        <div>Update</div>
                        <div>About</div>
                    </div>
                    <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:20px;text-align:left">
                        <p style="font-size:14px;color:#444;">这是一个基于nodeJS和jQuery-easyUI的后台管理系统</p>
                    </div>
        </div>
        <div data-options="region:'south',split:true" style="height:50px;">
           <span style="display:block;margin:10px auto;width: 281px;color:#999">Copyright © 2018 - 2025  版权所有</span>
        </div>
        <div data-options="region:'west',split:true" title="section" style="width:200px;">

                <div class="easyui-accordion"  data-options="multiple:true">
                        <div title="Management" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">

                            <ul style="list-style: none;padding-left:10px" id="menu">
                               
                                <li style="position:relative">
                                    <div class="panel-icon icon-edit" style="width:16px;position: absolute; height: 16px; z-index: 1; top: 2px;  left: 7px;"></div>
                                    <a href="javascript:;" class="easyui-linkbutton c1" style="width:145px;margin-bottom:10px;border-radius: 10px" link="./components/user.html">用户管理</a>
                                </li>
                                <li style="position:relative">
                                    
                                    <a href="javascript:;" class="easyui-linkbutton c1" style="width:145px;margin-bottom:10px;border-radius: 10px" link="./components/classify.html">分类管理</a>
                                </li>
                                <li style="position:relative">
                                    <div class="panel-icon icon-edit" style="width:16px;position: absolute; height: 16px; z-index: 1; top: 2px;  left: 7px;"></div>
                                    <a href="javascript:;" class="easyui-linkbutton c1" style="width:145px;margin-bottom:10px;border-radius: 10px" link="./components/news.html">新闻管理</a>
                                </li>
                                <li style="position:relative">
                                    <a href="javascript:;" class="easyui-linkbutton c1" style="width:145px;margin-bottom:10px;border-radius: 10px" link="./components/product.html">产品管理</a>
                                </li>
                                <li style="position:relative">
                                        <div class="panel-icon icon-edit" style="width:16px;position: absolute; height: 16px; z-index: 1; top: 2px;  left: 7px;"></div>
                                    <a href="javascript:;" class="easyui-linkbutton c1" style="width:145px;border-radius: 10px" link="./components/comment.html">评论管理</a>
                                </li>
                            </ul>


                        </div>
                        <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
                            <p>This is a small backstage management system, which can realize user management, news management, product management, comment management and other functions.</p>
                        </div>
                        <div title="welcome" data-options="iconCls:'icon-search'" style="padding:10px 10px;">
                            Thank you for using
                        </div>
                    </div>
        </div>
		<div data-options="region:'center',title:'Main',iconCls:'icon-edit'" style="position:relative">
                <div id="tt" class="easyui-tabs" style="width:700px;height:250px" data-options="fit:true" ></div>
                <div style="position:absolute;width: 1161px;height: 600px; background: #fff; top: 36px;left:4px;display: none" id="jiazai">
                    <img src="img/jiazai.gif" alt="" style="margin:200px auto;display: block" >
                </div>
		</div>
	</div>

    <script>
        var publicUrl='http://localhost:3000/';
        $("#menu li a").click(function(){
            var title = $(this).text();
            var link = $(this).attr('link');
            $('#jiazai').show();
            setTimeout(() => {
                $('#jiazai').hide();
            }, 1200);
            $('#tt').tabs('add',{
                title: title,
                fit:true,
                content: '<iframe scrolling="auto" frameborder="0" src="'+ link +'" width="100%" height="100%"></iframe>',
                closable: true
            });
        })
        </script>
</body>
</html>